import React from 'react';
import { connect } from 'dva';
import { Table } from 'antd';
import { Link } from 'dva/router';
import { getCol } from '../task/col';

const styles = require('../app.less');

const getOp = () => {
  return {
    title: '操作',
    key: 'op',
    render: (text, record) => {
      return (
        <div>
          <Link to={`examinePack?taskId=${record.id}`}>查看</Link>
        </div>
      );
    },
  };
};

/**
 * 工程列表 => 包列表 => 条目列表 => Record列表
 */
class Examine extends React.Component {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'task/query',
    });
  }

  render() {
    const { task, loading } = this.props;
    const { keys, tasks } = task;
    const columns = getCol(keys);
    if (!columns.find(item => item.key === 'op')) {
      columns.push(getOp());
    }

    return (
      <div className={styles.container}>
        <br />
        <h2>工程列表</h2>
        <Table
          columns={columns}
          dataSource={tasks.sort((a, b) => Number(b.id) - Number(a.id))}
          loading={loading.effects['task/query']}
          rowKey="id"
        />
      </div>
    );
  }
}

export default connect(state => state)(Examine);
